<template>
    <div class="orderProgress">
        <top @getId='getId' :name='topName' @setBoard="setBoard"></top>
        <div class="processList">
            <div class="jiantou" v-if='processList.length > 0'>
                <img src="@/assets/farmBoard/right1.png" alt="" width="70%">
            </div>
            <div class="item_progress" v-for="(k,ind) in processList" :key="ind">
                <div class="progress_circle">
                    <div class="circle_c">
                        <el-progress type="circle" :percentage="Math.floor(k.rate * 100) || 0"
                            :stroke-width="8" color='#00FF00' define-back-color='#ccc'>
                        </el-progress>
                        <div :title="k.processName">{{k.processName}}</div>
                    </div>
                    <div class="line" v-if="ind != processList.length - 1">
                        <i class="el-icon-right"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="orderView">
                <div class="tableContainer__3uWQq table_r">
                    <el-table :data="tableData1" header-row-class-name="customHeader" class="myTable"
                        :header-cell-style="{color:'#fff',fontWeight:'500',fontSize: '26px'}" style="width: 100%"
                        :row-style='rowStyle'>
                        <el-table-column label="" width="40">
                            <template slot-scope="scope">
                                <div class="bling-3" v-if='list1.length > 0 && (list1[processInd].id == scope.row.id)'>
                                    <img src="@/assets/farmBoard/right1.png" alt="" width="70%">
                                </div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="工单编号(加急)" width="160">
                            <template slot-scope="scope">
                                <div class="delay">
                                    <img v-if="scope.row.isDelay == 1" src="@/assets/farmBoard/KB_delay.svg" alt="" style="width: 16px">
                                    <div v-else style="width: 16px; height: 16px; margin-right: 4px"></div>
                                    <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                                        :title="scope.row.code">{{scope.row.code}}</span>
                                </div>
                            </template>
                        </el-table-column> -->
                        <el-table-column label="产品名称" width='210'>
                            <template slot-scope="scope">
                                <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                    {{scope.row.productName}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="产品规格" width="120">
                            <template slot-scope="scope">
                                <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{scope.row.productSpecification || '-'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" min-width='180'>
                            <template slot-scope="scope">
                                <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                    {{ scope.row.comment || '-' }}
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <img v-if="!tableData1.length" src="@/assets/farmBoard/KB_noContent.png" alt="" class="empty__vq2hK">
                </div>

                <!-- <span class="title"></span> -->
                <div class="tableContainer__3uWQq">
                    <el-table :data="tableData2" header-row-class-name="customHeader" class="myTable"
                        :header-cell-style="{color:'#fff',fontWeight:'500',fontSize: '26px'}" style="width: 100%"
                        >
                        <!-- <el-table-column label="工单编号(近期)" width='160px'>
                            <template slot-scope="scope">
                                <div class="delay">
                                    <img v-if="scope.row.isDelay == 1" src="@/assets/farmBoard/KB_delay.svg" alt="" style="width: 16px">
                                    <div v-else style="width: 16px; height: 16px; margin-right: 4px"></div>
                                    <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                                        :title="scope.row.code">{{scope.row.code}}</span>
                                </div>
                            </template>
                        </el-table-column> -->
                        <el-table-column label="" width="10">
                            <template slot-scope="scope">
                                <div class="bling-3">
                                    
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="产品名称" width='200'>
                            <template slot-scope="scope">
                                <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                    {{scope.row.productName}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" width="110">
                            <template slot-scope="scope">
                                <span :class="['iconBorder',enumState[scope.row.state]]">
                                    {{scope.row.stateName}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" width="90">
                            <template slot-scope="scope">
                                <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                    {{scope.row.planedNumber}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="完成时间">
                            <template slot-scope="scope">
                                {{ (scope.row.endTime).slice(5, 10) || '' }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <img v-if="!tableData2.length" src="@/assets/farmBoard/KB_noContent.png" alt="" class="empty__vq2hK">
                </div>
            </div>
        </div>

        <setBoard ref="setBoard" @confirm="confirm"></setBoard>
    </div>
</template>

<script>
    const activeIndex = 0
    import audioUrl from '@/assets/audio/t-rex-roar.mp3'
    import {
        getSearchCache
    } from '@/api/produceController'
    import {
        workReportGroupByProcess
    } from '@/api/lampController'
    import {
        workOrderOverview
    } from '@/api/dataController'
    import top from './top.vue'
    import setBoard from './setBoard.vue'
    export default {
        data() {
            return {
                list1: [],
                tableData1: [],
                list2: [],
                tableData2: [],
                intervalIndex: 1,
                currentPage: 1,
                enumState:{
                    0:'no',
                    1:'ing',
                    2:'end',
                    3:'cancle'
                },
                topName:'工单执行进度看板',
                timer: null,
                processList: [],
                speechList: [],
                rowNow: 0,
                page: 1,
                processId: '',
                processInd: 0,
                blingInterval: null,
                pageSize: 10,
                pageSizeR: 10,
                refreshTimer: null,
                interfaceFlag: true,
                rowId: '',
                processRouterId: '',
                cacheInfo: {}
            }
        },
        components:{
            top,
            setBoard
        },
        mounted() {
            this.handleFull()
            this.getSearchCacheFn({
                cacheName: 'orderProgress:set',
                type: 0
            })
            this.windowMsg = new window.SpeechSynthesisUtterance();
            this.getWorkOrderOverviewList({
                stateList: [1 ,3]
            })
            this.refreshTimer = setInterval(() => {
                this.getNewRes()
            },5000)
        },
        methods: {
            //分组id
            getId(processRouterId) {
                this.processRouterId = processRouterId
                this.handleInterface()
            },
            //看板列表
            workReportGroupByProcessFn: async function (data) {
                const res = await workReportGroupByProcess(data)
                const {
                    interval
                } = this.cacheInfo
                if (res.code == 200) {
                    console.log(res.data.voiceCallsInfos);
                    if (res.data.voiceCallsInfos !== null && res.data.voiceCallsInfos?.length > 0) {
                        res.data.voiceCallsInfos.forEach(i => {
                            this.speechList.push({
                                text: i.text,
                                time: 0
                            })
                        })
                        if (this.speechList.length && this.interfaceFlag) {
                            this.play(this.speechList[activeIndex])
                        }
     
                    }
                    clearInterval(window.orderProgressTimer)
                    window.orderProgressTimer = setInterval(() => {
                        this.handleInterface()
                    }, interval * 1000)
                }
            },
            getWorkOrderOverviewList: async function(data) {
                const res = await workOrderOverview(data)
                this.list1 = []
                this.list2 = []
                if (res.code == 200) {
                    res.data.map(item => {
                        if(item.isUrgent == 1) {
                            this.list1.push(item)
                        } else {
                            this.list2.push(item)
                        }
                    })
                    if(this.list1.lengt < this.pageSize) {
                        this.tableData1 = this.list1
                    } else {
                        this.tableData1 = this.list1.slice(0, this.pageSize)
                    }
                    if(res.data.length > 0) {
                        this.processId = res.data[0].id
                        this.blingIntervalFn()
                    }


                    const intervalTime = this.pageSizeR * 5000
                    const pageCount = this.utils.countPage(this.list2.length, this.pageSizeR)
                    this.tableData2 = this.list2.slice((this.intervalIndex - 1) * this.pageSizeR, this.intervalIndex * this.pageSizeR)
                    if (pageCount == 0) { //空
                        this.tableData2 = []
                    } else if (pageCount > 1) {
                        clearInterval(this.timer)
                        this.timer = setInterval(() => {
                            ++this.intervalIndex
                            if (pageCount < this.intervalIndex) {
                                this.intervalIndex = 1
                            }
                            this.tableData2 = this.list2.slice((this.intervalIndex - 1) * this.pageSizeR, this
                                .intervalIndex * this.pageSizeR)
                        }, intervalTime)
                    } else if (pageCount == 1) { //只有一页
                        this.tableData2 = this.list2
                    }
                    if(this.list1.length > 0) {
                        this.processList = res.data[0].list
                    }
                }
            },
            getNewRes() {
                workOrderOverview({stateList: [1 ,3]}).then(res => {
                    if(res.code == 200) {
                        let arr1 = []
                        let arr2 = []
                        res.data.map(item => {
                            if(item.isUrgent == 1) {
                                arr1.push(item)
                            } else {
                                arr2.push(item)
                            }
                        })
                        this.processId = this.rowId
                        this.list1 = arr1
                        this.list2 = arr2
                        this.tableData1 = this.list1.slice((this.page-1)*this.pageSize, this.page * this.pageSize)
                        this.tableData2 = this.list2.slice((this.intervalIndex - 1) * this.pageSizeR, this.intervalIndex * this.pageSizeR)
                    }
                })
            },
            //获取缓存信息
            getSearchCacheFn: async function (data) {
                const res = await getSearchCache(data)
                this.cacheInfo = res.data !== null ? JSON.parse(res.data) : {
                    interval: 10,
                    intervalTime:0,
                    playTimes:2,
                    roundNum:0
                }
            },
            handleFull(){
                if (document.fullscreenEnabled) { //是否支持全屏
                    let elem = document.querySelector(".orderProgress");
                    elem.requestFullscreen()
                } else {
                    this.utils.showMsg('你的浏览器不支持全屏模式！', 'error')
                }
            },
            setBoard() {
                let jsonData = JSON.parse(JSON.stringify(this.cacheInfo))
                this.$refs.setBoard.open(jsonData)
            },
            confirm(form) {
                this.cacheInfo = form
                this.handleInterface()
            },
            handleInterface() {
                const {intervalTime,roundNum} = this.cacheInfo
                this.workReportGroupByProcessFn({
                    processRouterId: this.processRouterId,
                    intervalTime,
                    roundNum,
                    verifyState: 0
                })
            },
            removeTag(tagList) {
                tagList.forEach(i => i.remove())
            },
            play(data) {
                this.interfaceFlag = false
                const audioNode = document.createElement('audio')
                const screenNode = document.querySelector('.orderProgress')
                audioNode.src = audioUrl
                audioNode.autoplay = 'autoplay'
                screenNode.appendChild(audioNode)
                if (!this.windowMsg) {
                    this.windowMsg = new window.SpeechSynthesisUtterance()
                }
                this.windowMsg.text = data.text;
                this.windowMsg.rate = 0.8;
                this.windowMsg.onerror = (e) => {
                    if (e.error === 'interrupted') return
                    this.utils.showMsg('系统错误,请重新发起工序请求', 'error')
                }
                this.windowMsg.onend = () => {
                    this.speechList[activeIndex].time++
                    if (this.speechList[activeIndex].time > this.cacheInfo.playTimes - 1) {
                        this.speechList.splice(activeIndex, 1)
                    }
                    if (this.speechList.length === 0) {
                        this.interfaceFlag = true
                        //移除所有标签
                        this.removeTag(document.querySelectorAll('audio'))
                        speechSynthesis.cancel()
                        return
                    }
                    this.play(this.speechList[activeIndex])
                }
                audioNode.addEventListener('ended', () => {
                    speechSynthesis.speak(this.windowMsg);
                })
            },
            circleStyle(n,m) {
                if(n == m) {
                    return {
                        width: '40px'
                    }
                }
            },
            blingIntervalFn() {
                clearInterval(this.blingInterval)
                this.blingInterval = setInterval(() => {
                    this.processInd++
                    if(this.processInd >= this.list1.length) {
                        this.processInd = 0
                        this.page = 1
                        this.tableData1 = this.list1.slice(0, this.pageSize)
                    }
                    if((this.processInd) % this.pageSize == 0 && this.processInd != 0) {
                        this.page++
                        this.tableData1 = this.list1.slice(this.processInd, this.pageSize * this.page)
                    }
                    if(this.list1.length > 0) {
                        this.processList = this.list1[this.processInd].list
                        this.processId = this.list1[this.processInd].id
                    } else {
                        this.processList = []
                        this.processId = ''
                    }
                }, 5000)
            },
            rowStyle({ row }) {
                if(row && row.id == this.list1[this.processInd].id && this.tableData1.length > 0) {
                    this.rowId = this.list1[this.processInd].id
                    return {
                        // background: '#1890FF'
                        background: '#0000CD'
                    }
                }
            }
        },
        beforeRouteLeave(to, from, next){
            clearInterval(this.timer)
            clearInterval(window.orderProgressTimer)
            clearInterval(this.blingInterval)
            clearInterval(this.refreshTimer)
            next()
        }
    }
</script>

<style lang="less" scoped>
    .orderProgress {
        position: relative;
        width: 100%;
        height: 100%;
        background: url(~@/assets/farmBoard/KB_BG.jpg);
        background-size: 100% 100%;
        .processList {
            width: 100%;
            padding: 8px 16px;
            border-radius: 8px;
            margin: 6px auto 8px;
            display: flex;
            overflow: auto;
            justify-content: flex-start;
            // align-items: center;
            .jiantou {
                width: 40px;
                height: 23px;
                padding-top: 5px;
                margin-right: 10px;
            }
            .item_progress {
                display: flex;
                flex-direction: column;

                .progress_circle {
                    display: flex;
                    align-items: center;
                    position: relative;
                    cursor: pointer;
                    .circle_c {
                        color: #fff;
                        font-size: 12px;
                        display: inline-block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        text-align: center;
                        white-space: nowrap;
                    }

                    .line {
                        width: 30px;
                        // height: 2px;
                        margin: 0px 3px;
                        font-size: 25px;
                        // background-color:#fff;
                        text-align: center;
                        color: #fff;
                        position: relative;
                        right: 0;
                        top: -11px;
                    }
                }


                /deep/ .el-progress-circle {
                    width: 35px !important;
                    height: 35px !important;
                }

                /deep/ .el-progress__text {
                    font-size: 12px !important;
                    color: #fff !important;
                }
            }
        }
        .body {
            position: absolute;
            top: 98px;
            width: 100%;
            height: calc(100% - 98px);

            .orderView {
                position: relative;
                width: 100%;
                height: 100%;
                // background: url(~@/assets/farmBoard/kb_bg1.png);
                background-size: 100% 100%;
                padding: 15px 0 15px 0;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                align-content: flex-start;
                .title {
                    height: 48px;
                    width: 100%;
                    font-weight: 600;
                    display: inline-block;
                    margin: 15px 0 10px 10px;
                    font-size: 32px;
                    color: #04f9fe;
                }

                .tableTit {
                    height: 20px;
                    color: white;
                    font-size: 18px;
                    display: flex;
                    align-items: flex-end;
                    justify-content: center;
                }

                .tableContainer__3uWQq {
                    width: 42%;
                    padding: 0 4px 0 4px;
                    position: relative;

                    /deep/ .el-table {
                        background-color: transparent;
                        border: 1px solid #fff;
                        color: #fff;
                        font-size: 28px;
                        height: 597px;

                        .delay {
                            display: flex;
                            align-items: center;

                            img {
                                width: 24px;
                                margin-right: 4px;
                            }
                        }

                        .iconBorder {
                            border-radius: 2px;
                            padding: 2px
                        }

                        .no {
                            // border: 1px solid rgb(197, 152, 56);
                            color: rgb(197, 152, 56)
                        }

                        .end {
                            // border: 1px solid rgb(251, 101, 131);
                            color: rgb(251, 101, 131)
                        }

                        .ing {
                            // border: 1px solid rgb(124, 252, 178);
                            color: rgb(124, 252, 178)
                        }

                        .cancle {
                            // border: 1px solid rgb(205, 98, 55);
                            color: rgb(205, 98, 55)
                        }
                    }

                    /deep/ .el-table__header-wrapper {
                        .customHeader {
                            background: transparent;

                            th {
                                padding: 0;
                                font-size: 12px;
                                background-color: transparent;
                                border-bottom: 1px solid rgba(9, 255, 249, 0.4);
                                background-color: rgba(9, 255, 249, 0.4);
                            }
                        }
                    }

                    /deep/ .el-table__body {
                        tr {
                            background-color: transparent;

                            td {
                                padding: 10px 0;
                                border: none;
                            }
                        }

                        tr:nth-child(odd) {
                            background-color: rgba(0, 0, 0, .15);
                        }
                    }

                    /deep/ .el-table__cell {
                        padding: 10px 0 !important;
                        .cell {
                            padding: 4px 0;
                        }
                    }
                    /deep/ .el-table__empty-block {
                        display: none !important;
                    }

                    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
                        background-color: rgba(140, 182, 222, 0.3);
                    }


                    .empty__vq2hK {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        width: 230px;
                    }
                }
                .table_r {
                    width: 58%;
                    /deep/ .el-table {
                        color: red;
                    }
                }
            }
        }
        .bling-3 {
            width: 40px;
            height: 23px;
        }

        /deep/ .el-row {
            margin: 0 !important;
        }
    }
</style>